/**
 * 视图组件
 */
import React, { Component, Fragment } from 'react';
import { LocaleProvider, Modal ,Card} from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import {isEmpty} from '../common';
import UIToolbar from './UIToolbar';

export default class UIView extends Component {

	static defaultProps = { 
		inPop: false,
		toolbarPosition : 'top',
	}

	constructor(props) {
		super(props);

		if (props.inPop === true) {
			this.state = {
				showModal: false,		
			};
		}
	}

	componentDidMount() {
		const { toolbar } = this.refs;
		const { setToolbarState } = this.props;
		if (setToolbarState && toolbar) {
			setToolbarState(toolbar, this);
		}
	}

	getParent = () => {
		return this.props.parent;
	}

	closeModal = (e) => {
		this.setState({ showModal: false });
	}

	isOpend = () => {
		return this.state.showModal;
	}

	getToolbar = () => {
		return this.refs.toolbar;
	}

	openModal = (cb) => {
		
		const { setToolbarState, parent } = this.props;

		this.setState({ showModal: true }, () => {
			if (cb) {
				setTimeout(() => { cb(parent !== undefined ? parent : this); });
			}

			setTimeout(() => {
				if (setToolbarState && this.refs.toolbar) {
					setToolbarState(this.refs.toolbar, [], this);
				}
			});
		});
	}

	setToolbarActionGroup = (actionGroup) => {
        this.refs.toolbar.setActionGroup(actionGroup);
    }

	render() {
        const mainContent = this.props.children;
		let topContent = this.props.topContent;
		const toolbarPosition = this.props.toolbarPosition;

		if (!topContent) {
			topContent = (<Fragment />);
		}

		const toolbar = (
			isEmpty(this.props.actionGroupId) === false ?
				<UIToolbar actionGroupId={this.props.actionGroupId} ref="toolbar" history={this.props.history} location={this.props.location} parent={this} actionHandler={this.props.actionHandler} value={this.props.toolbarValue} />
				:
				null
		);
		if (this.props.inPop === true) {
			return (
				<LocaleProvider locale={zh_CN}>
					<Modal destroyOnClose={this.props.destroyOnClose !== null ? this.props.destroyOnClose : true} title={this.props.title} width={this.props.width} bodyStyle={{ padding: 5 }} visible={this.state.showModal} onCancel={this.closeModal}
						footer={toolbar} afterClose={this.props.afterClose} maskClosable={false}
						closable={this.props.closable}
						zIndex={this.props.zIndex}
					>
						<div className="viewConetnt">
						{topContent}

						{mainContent}
						</div>
					</Modal>
				</LocaleProvider>
			);
		}
		else {
			return (
				<LocaleProvider locale={zh_CN}>
					<div className="viewConetnt">
						<Card title={this.props.title} style={this.props.style} bordered={this.props.bordered} extra={this.props.extra}>
							{topContent}
							{
								toolbarPosition === 'top' ? (
									<div className="viewOperator">
									{
										isEmpty(this.props.actionGroupId) === false ? toolbar : ''
									}
									</div>
								) : ''
							}
							{mainContent}
							{
								toolbarPosition === 'bottom' ? (
									<div className="viewOperator" style={{marginTop : '5px',textAlign : 'right'}}>
									{
										isEmpty(this.props.actionGroupId) === false ? toolbar : ''
									}
									</div>
								) : ''
							}
						</Card>
					</div>
				</LocaleProvider>
			);
		}
	}
}
